import { useRef, useEffect } from 'react';
import { useSize } from 'ahooks';
import { useX6Graph } from '@/hooks/useX6Graph';
import nodeList from '@/nodes/shapes';
import { Button } from 'antd';
import initialData from '@/hooks/initialData';
import type { Model } from '@antv/x6';
import { Remark } from '@/nodes/ReactRemark';

export default function HomePage() {
  const containerRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const sidebarRef = useRef<HTMLDivElement>(null);
  const { 
    graph,
    initGraph, 
    centerContent,
    registerReactNode, 
    registerNodes, 
    initDnd,
    dragCreateNode,
    runFlow, 
    getFlowData, 
    setFlowData,
    addRemarkNode,
  } = useX6Graph();
  
  // 使用 ahooks 的 useSize 获取容器尺寸
  const size = useSize(contentRef);

  useEffect(() => {
    if (containerRef.current && size && size.width > 0 && size.height > 0 && !graph) {
      // 传入容器的宽高到 initGraph
      initGraph(containerRef.current, size.width, size.height);
      // 批量注册所有节点
      registerNodes(nodeList.map(({ shape, config }) => ({ name: shape, config })));
      // 注册自定义节点
      registerReactNode({
        shape: 'custom-basic-react-remark',
        width: 200,
        height: 120,
        effect: ['data'],
        component: Remark,
      });
      // 初始化 Dnd
      if (sidebarRef.current) {
        initDnd(sidebarRef.current);
      }
      // 居中画布
      centerContent();
    }
    // return () => {
    //   disposeGraph();
    // };
  }, [size]); // 当尺寸变化时重新初始化



  const setData = () => {
    setFlowData(initialData as unknown as Model.FromJSONData);
  }

  return (
    <div className="flex justify-between bg-gray-50 items-start gap-5 h-full min-h-0">{/* gap-5 = 20px */}
      {/* 左侧栏 */}
      <div ref={sidebarRef} className="w-[80px] bg-white h-full rounded shadow flex-shrink-0 p-2 flex flex-col items-center gap-2 overflow-y-auto overflow-x-hidden">
        {nodeList.map(({ shape, label, image }) => (
          <div 
            data-shape={shape}
            data-label={label}
            data-image={image}
            onMouseDown={dragCreateNode} 
            key={shape} 
            className="w-12 flex flex-col items-center flex-shrink-0">
            <img src={image} alt={label} className="w-10 h-10 object-contain mb-1" />
            <span 
              className="text-xs text-center truncate w-full" 
              title={label}
            >
              {label}
            </span>
          </div>
        ))}
      </div>
      {/* 中间内容：X6 画布容器 */}
      <div className="flex-1 min-w-0 h-full rounded shadow" ref={contentRef}>
        <div
          ref={containerRef}
          id="graph-container"
          className='h-full w-full'
        />
      </div>
      {/* 右侧栏 */}
      <div className="w-[300px]  h-full rounded shadow flex-shrink-0">
        <Button type="primary" onClick={runFlow}>模拟运行</Button>
        <Button type="primary" onClick={getFlowData}>获取数据</Button>
        <Button type="primary" onClick={setData}>设置数据</Button>
        <Button type="primary" onClick={addRemarkNode}>添加备注节点</Button>
        
      </div>
    </div>
  )
} 